<template>
  <div class="app-container">
    <div class="search-condition">
      <el-form ref="searchForm" :model="searchData" :inline="true">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="searchData.name" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="searchData.type" placeholder="请选择">
            <el-option label="全部" :value="-1" />
            <el-option label="学习心得" :value="0" />
            <el-option label="交流心得" :value="1" />
            <el-option label="交流建议" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间" prop="time">
          <el-date-picker
            v-model="searchData.time"
            style="width: 185px"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label-width="0">
          <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="search">
            搜索
          </el-button>
          <el-button size="small" class="filter-item" type="primary" icon="el-icon-refresh" style="margin-left: 10px;" @click="initSearch">
            刷新
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin: 10px 0;">
      <el-button size="small" class="filter-item" type="primary" icon="el-icon-plus" style="margin-left: 10px;" @click="add">
        添加
      </el-button>
    </div>
    <el-table
      ref="table"
      :data="tableData"
      :max-height="tableHeight"
      :header-cell-style="{background:'#eef1f6',color:'#606266',fontSize:'12px',padding:'4px 0'}"
      v-loading="tableLoading"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="name"
        align="center"
        label="姓名"
        min-width="85"
      />
      <el-table-column label="操作" width="210" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDetail(scope.row)">详细</el-button>
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
					<el-popconfirm
            title="删除后不可恢复，确定删除？"
            @onConfirm="handleDelete(scope.row)"
          >
            <el-button type="danger" size="mini" style="margin-left: 10px;" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="searchData.pageInt"
      :page-sizes="pagesizes"
      :page-size="searchData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <el-dialog
      :title="dialogTitle"
      :visible.sync="editDialogVisible"
      width="1000px"
      center
      @closed=""
      :close-on-click-modal="false"
    >
      <el-form 
        class="edit-form"
        :model="editData" 
        ref="editForm" 
        :rules="rules" 
        label-width="100px" 
        inline 
        size="normal"
      >
        <el-form-item label="考试标题" prop="title">
          <el-input v-model="editData.title"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="initEdit">取 消</el-button>
        <el-button :loading="confirmEditLoading" v-if="canEdit" type="primary" @click="confirmEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import service from '@/utils/request'
export default {
  name: '',
  data() {
    return {
      tableData: [],
      tableHeight: document.body.clientHeight - 230,
      searchData: {
        pageSize: 10,
        pageInt: 1
      },
      editData: {},
      pagesizes: [10, 20, 30],
      total: 0,
      dialogTitle: '',
      editDialogVisible: false,
      confirmEditLoading: false,
      rules: {
        title: [{ required: true, message: '请输入考试标题', trigger: 'blur' },],
      },
      canEdit: false,
      tableLoading: false
    }
  },
  
  mounted() {
    this.initTable()
  },
  methods: {
    initTable() {
      this.getList()
    },
    getList() {
      // this.tableLoading = true
      // service({
      //   url: '',
      //   method: 'get',
      //   params: this.searchData
      // }).then(re => {
      //   var tableData = re.data.list
      //   this.total = re.data.total
      //   tableData.forEach(element => {
      //   })
      //   this.tableData = tableData
      // }).finally(() => {
      //   this.tableLoading = false
      // })
    },
    search() {
      this.searchData.pageInt = 1
      this.getList()
    },
    initSearch() {
      this.$refs.searchForm.resetFields()
      this.getList()
    },
    handleCurrentChange(val) {
      this.searchData.pageInt = 1
      this.searchData.pageInt = val
      this.getList()
    },
    handleSizeChange(val) {
      this.searchData.pageInt = 1
      this.searchData.pageSize = val
      this.getList()
    },
    add() {
      this.dialogTitle = '添加'
      this.editDialogVisible = true
      this.canEdit = true
      this.editData = {}
    },
    handleDetail(row) {
      this.dialogTitle = '详细'
      this.canEdit = false
      this.getDetail(row)
    },
    handleEdit(row) {
      this.dialogTitle = '编辑'
      this.canEdit = true
      this.getDetail(row)
    },
    getDetail(row) {
      // service({
      //   url: '',
      //   method: 'get',
      //   params: {id: row.id}
      // }).then(re => {
      //   this.editDialogVisible = true
      //   this.editData = re.data
      // })
    },
    confirmEdit() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.confirmEditLoading = true
          // service({
          //   url: '',
          //   method: 'post',
          //   data: this.editData
          // }).then(re => {
          //   this.$message.success(this.dialogTitle + '成功')
          //   this.getList()
          //   this.initEdit()
          // }).finally(() => {
          //   this.confirmEditLoading = false
          // })
        } else {
          this.$message.error('请输入必填项')
        }
      })
    },
    initEdit() {
      this.editDialogVisible = false
    },


    handleDelete(row) {
      // service({
      //   url: '',
      //   method: 'get',
      //   params: {}
      // }).then(re => {
      //   if (re.code === 20000) {
      //     this.$message.success('已删除')
      //     this.getList()
      //   }
      // })
    }
  }
}
</script>
<style  lang="scss">
.index {
  .edit-form {
    .el-input {
      width: 200px;
    }
  }
}
</style>
